<template>
    <div class="dragger-item">
        <el-popover placement="right" trigger="manual" :value="item.isShowEdit">
            <div class="wrapper-edit-container padding-10" v-if="item.isShowEdit">
                <div class="closeContainer" style="position: absolute;right:-5px;top:-5px;" @click="closeEdit">
                    <i class="iconfont icon-close"></i>
                </div>
                <search-bar-edit
                        :item="item"
                        v-if="item&&item.type==='商品搜索'" style="z-index:9"></search-bar-edit>
                <text-bar-edit
                        :item="item"
                        v-if="item&&item.type==='文本'" style="z-index:9"></text-bar-edit>
                <magic-edit v-if="item&&item.type==='魔方'" style="z-index:9" :item="item"></magic-edit>
                <image-swiper-edit v-if="item&&item.type==='图片广告'" style="z-index:9" :item="item"></image-swiper-edit>
                <products-edit v-if="item&&item.type==='商品'" style="z-index:9" :item="item"></products-edit>
            </div>

            <div slot="reference" class="coverContainer">
                <div class="closeContainer" style="position: absolute;right:-5px;top:-5px;" @click="deleteItem($event)">
                    <i class="iconfont icon-close"></i>
                </div>
                <div class="coverItem" @click="clickItem($event)"></div>
                <search-bar v-if="item&&item.type==='商品搜索'" style="z-index:9" :item="item"></search-bar>
                <text-bar v-if="item&&item.type==='文本'" style="z-index:9" :item="item"></text-bar>
                <magic v-if="item&&item.type==='魔方'" style="z-index:9" :item="item"></magic>
                <image-swiper v-if="item&&item.type==='图片广告'" style="z-index:9" :item="item"></image-swiper>
                <products v-if="item&&item.type==='商品'" style="z-index:9" :item="item"></products>
            </div>
        </el-popover>

    </div>
</template>
<script>
    import {createProp} from '@/util/util'
    import {findParentComponent} from "@/util/findComponent";
    import * as myalert from '@/util/myalert'

    export default {
        props: {
            item: createProp([Object]),
            type: createProp([String])
        },
        data() {
            return {}
        },
        methods: {
            clickItem(e) {
                e.stopPropagation();
            },
            deleteItem(e) {
                e.stopPropagation();
                var self = this
                myalert.confirm("确定delete吗").then(isyes => {
                    if (isyes.confirm) {
                        var parent = findParentComponent(self, 'editAllParent')
                        parent.resultList = parent.resultList.filter(_item => _item.id !== self.item.id)
                    }
                })

            },
            closeEdit(e) {
                var parent = findParentComponent(this, 'editAllParent')
                var index = parent.resultList.findIndex(_item => _item.id === this.item.id)
                parent.resultList[index].isShowEdit = false

            }
        },
        components: {
            "search-bar": () => import('@/components/search-bar'),
            "search-bar-edit": () => import('@/components/search-bar-edit'),
            "text-bar": () => import('@/components/text-bar'),
            "text-bar-edit": () => import('@/components/text-bar-edit'),
            "magic": () => import('@/components/magic'),
            "magic-edit": () => import('@/components/magic-edit'),
            "image-swiper-edit": () => import('@/components/image-swiper-edit'),
            "image-swiper": () => import('@/components/image-swiper'),
            "products": () => import('@/components/product'),
            "products-edit": () => import('@/components/product-edit')
        }
    }
</script>
<style lang="scss">
    .dragger-item {
        cursor: move;
        width: 100%;
    }

    .coverContainer {
        position: relative;

        .coverItem {
            position: absolute;
            z-index: 10;
            content: "";
            left: 0px;
            right: 0px;
            width: 100%;
            height: auto;
        }
    }
</style>
